<!-- eslint-disable vue/valid-v-model -->
<template>
  <el-dialog :title="form.account?'修改合作商':'新增合作商'" :visible="visible" @close="closeFn">
    <el-form
      class="form"
      :rules="formrules"
      ref="form"
      :model="form"
      width="200px"
    >
      <!--               合作商名称               -->
      <el-form-item prop="name" label="合作商名称">
        <el-col :span="19">
          <el-input
            size="medium"
            placeholder="请输入"
            v-model="form.name"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    联系人                     -->
      <el-form-item prop="contact" label="联系人">
     <el-col :span="19">
          <el-input
            size="medium"
            placeholder="请输入"
            v-model="form.contact"
          ></el-input>
        </el-col>
      </el-form-item>

      <!--                                    联系电话                     -->
      <el-form-item prop="mobile" label="联系电话">
      <el-col :span="19">
          <el-input
            size="medium"
            placeholder="请输入"
            v-model="form.mobile"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    分成比例                     -->
      <el-form-item prop="ratio" label="分成比例">

        <el-input-number class="a1" v-model="form.ratio" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>

      </el-form-item>
      <!--                                    账号                     -->
      <el-form-item prop="account" label="账号" v-show="A">
    <el-col :span="19">
          <el-input
            size="medium"
            placeholder="请输入"
            v-model="form.account"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    密码                     -->

      <el-form-item prop="password" v-show="A" label="密码">
     <el-col :span="19">
          <el-input
            size="medium"
            placeholder="请输入"
            v-model="form.password"
          ></el-input>
        </el-col>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button class="btn" @click="closeFn">取 消</el-button>
      <el-button class="btn" type="primary" @click="newCard">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getpartner, businessType, newPartList, modifyPartList } from '@/api/point'
import { regionData } from 'element-china-area-data'
// import { number } from 'echarts'
// import { number } from 'echarts'

export default {
  async created () {
    const {
      data: { currentPageRecords }
    } = await getpartner()
    const { data } = await businessType()
    this.getpartner = currentPageRecords
    this.businessType = data
    console.log(this.businessType)
    console.log(this.getpartner)
    console.log(this.getPointListAll)
  },
  watch: {
    visible () {
      // if (this.visible === true && this.ListA) {
      //   this.form.regionName = this.ListA.name
      //   this.form.remark = this.ListA.remark
      //   this.form.id = this.ListA.id
      // }
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },

    // 封装的省市区

    closeFn () {
      this.form = {
        account: '',
        contact: '',
        mobile: '',
        name: '',
        password: '',
        ratio: ''
      }
      this.$refs.form.resetFields()
      this.$emit('closeFn')
    },
    async newCard () {
      if (!this.A) {
        await modifyPartList(this.form).then(() => {
          this.$emit('closeFn')
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      } else {
        await newPartList(this.form).then(() => {
          this.$emit('closeFn')
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      }
    }
  },
  computed: {
    'form.addr': {
      set (val) {
        this.$emit('input', val)
      },
      get (val) {
        return this.form.addr
      }
    }
  },
  props: {
    A: {
      type: Boolean,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    },
    change: {
      type: Number,
      required: true
    },
    ListA: {
      type: Object,
      required: true
    },
    getPointListAll: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 封装的省市区
      options: regionData,
      selectedOptions: [],

      businessType: [], // 合作商列表
      getpartner: [], // 商圈列表
      formrules: {
        account: [
          { required: true, message: '这玩意儿不能不填呢', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        name: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],

        password: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        ratio: [{ required: true, message: '这个也得填呢', trigger: 'blur' }]

      },
      form: {
        account: '',
        contact: '',
        mobile: '',
        name: '',
        password: '',
        ratio: ''

      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-form-item__label {
  width: 100px;
}
::v-deep .el-dialog__body {
  padding: 10px 30px;
}
.a1 {
  width: 79%;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
  // margin-left: 10px;
}
.a2 {
  padding-top: 10px;
  padding-left: 100px;
  width: 80%;
}
</style>
